<template>
    <div class="information container">
        <ul class="info-container">
            <li v-for="(item, index) in infoList" :key="index+'info'">
                <div class="header">
                    <div class="title"><img :src="item.logo" alt="" style="margin: 7px 5px 0 0">{{item.title}}</div>
                    <div class="more link">更多
                        <i class="el-icon-arrow-right"></i></div>
                </div>
                <div class="content">
                    <div class="cover">
                        <img :src="item.src" alt="">
                    </div>
                    <ul class="info-text">
                        <li v-for="(p,index) in item.article" :key="index+'ar'">
                            <span class="fl art">{{p.content}}</span>
                            <span class="fr time">{{p.update}}</span>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "InformationBlock",
        data() {
            return {
                infoList: [
                    {
                        title: '职场资讯',
                        logo: require('@/assets/images/icon2.png'),
                        article: [
                            {
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },
                        ],
                        src: require('@/assets/images/图层1014.png')
                    },{
                        title: '职场资讯',
                        logo: require('@/assets/images/icon3.png'),
                        article: [
                            {
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },
                        ],
                        src: require('@/assets/images/图层1059.png')
                    },{
                        title: '职场资讯',
                        logo: require('@/assets/images/形状706.png'),
                        article: [
                            {
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },{
                                content: '易夫子人才招聘网正式上线啦',
                                update: '2010-04-27'
                            },
                        ],
                        src: require('@/assets/images/图层1348.png')
                    },
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .information {
        margin-top: 65px;
        background: #F7F8FA;
        .info-container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            li {
                width: 392px;
                height: 414px;
                background: #fff;
                .header {
                    width: 100%;
                    height: 72px;
                    padding: 0 15px 0 35px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #EEEEEE;
                    .title {
                        height: 100%;
                        line-height: 72px;
                        float: left;
                        font-size: 23px;
                        padding-left: 29px;
                        position: relative;
                        img {
                            position: absolute;
                            top: 16px;
                            left: 0;
                        }
                    }
                    .more {
                        color: #AEAEAE;
                        height: 100%;
                        line-height: 72px;
                        float: right;
                        font-size: 17px;
                    }
                }
                .content {
                    width: 100%;
                    height: 309px;
                    padding: 21px 17px;
                    box-sizing: border-box;
                    overflow: hidden;
                    .cover {
                        width: 360px;
                        height: 102px;
                        background: #ccc;
                        img {
                            width: 360px;
                            height: 102px;
                        }
                    }
                    .info-text {
                        height: 180px;
                        li {
                            width: 100%;
                            height: 36px;
                            padding:10px 0 0 13px;
                            box-sizing: border-box;
                            line-height: 36px;
                            position: relative;
                            &::before{
                                position: absolute;
                                left: 0;
                                top: 24px;
                                content:"";
                                width: 8px;
                                height: 8px;
                                border-radius: 50%;
                                background: @main-color;
                                font-size:30px;
                            }
                            span {
                                display: inline-block;
                                white-space:nowrap;
                                overflow:hidden;
                                text-overflow:ellipsis;
                            }
                            .art {
                                color: #333333;
                                width: 208px;
                            }
                            .time {
                                font-size: 15px;
                                color: #B6B6B6
                            }
                        }
                    }
                }
            }
        }
    }
</style>